<template>
  <div class="paper-management">
    <!-- <h1 class="page-title">论文管理系统</h1> -->
    <!-- 搜索和按钮组 -->
    <div class="action-bar">
      <el-input v-model="searchQuery" placeholder="搜索论文" class="search-input" @input="handleSearch">
        <template #prefix>
          <el-icon>
            <Search />
          </el-icon>
        </template>
      </el-input>
      <div class="button-group">
        <el-button type="primary" @click="handleAdd">新增论文</el-button>
        <el-button type="danger" @click="handleBatchDelete" :disabled="!selectedPapers.length">
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 论文表格 -->
    <el-table :data="filteredPapers" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="title" label="标题" width="280" />
      <el-table-column prop="authors" label="作者" width="130" />
      <el-table-column prop="journal" label="期刊" width="140" />
      <el-table-column prop="publishDate" label="发表日期" width="120" />
      <el-table-column prop="keywords" label="关键词" width="200" />
      <el-table-column prop="college" label="所属学院" width="120" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button link type="danger" size="small" @click="handleDelete(scope.row)">
            删除
          </el-button>
          <el-button link type="success" size="small" @click="handleDownload(scope.row)">
            下载
          </el-button>
          <el-button link type="warning" size="small">
            <router-link to="/detail">详情</router-link>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑论文弹窗 -->
    <el-dialog v-model="dialogVisible" :title="isEditing ? '编辑论文' : '新增论文'" width="50%">
      <el-form :model="currentPaper" :rules="rules" ref="paperForm" label-width="100px" @submit.prevent="handleSave">
        <el-form-item label="标题" prop="title">
          <el-input v-model="currentPaper.title" />
        </el-form-item>
        <el-form-item label="作者" prop="authors">
          <el-input v-model="currentPaper.authors" />
        </el-form-item>
        <el-form-item label="期刊" prop="journal">
          <el-input v-model="currentPaper.journal" />
        </el-form-item>
        <el-form-item label="发表日期" prop="publishDate">
          <el-date-picker v-model="currentPaper.publishDate" type="date" placeholder="选择日期" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="关键词" prop="keywords">
          <el-input v-model="currentPaper.keywords" />
        </el-form-item>
        <el-form-item label="摘要" prop="abstract">
          <el-input v-model="currentPaper.abstract" type="textarea" :rows="4" />
        </el-form-item>
        <el-form-item label="所属学院" prop="college">
          <el-select v-model="currentPaper.college" placeholder="请选择所属学院">
            <el-option label="信息工程学院" value="信息工程学院" />
            <el-option label="经济管理学院" value="经济管理学院" />
            <el-option label="智能制造学院" value="智能制造学院" />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import { ref, computed, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

// 假数据
const papers = ref([
  {
    id: 1,
    title: '人工智能在医疗领域的应用研究',
    authors: '张三，李四',
    journal: '中国医学科学杂志',
    publishDate: '2023-05-15',
    keywords: '人工智能，医疗，应用',
    abstract: '本文探讨了人工智能在医疗领域的应用前景和挑战...',
    college: '智能制造学院',
    downloadCount: 10
  },
  {
    id: 2,
    title: '区块链技术在供应链管理中的应用',
    authors: '王五，赵六',
    journal: '管理科学学报',
    publishDate: '2023-04-20',
    keywords: '区块链，供应链管理，创新',
    abstract: '本研究分析了区块链技术如何改善供应链管理效率...',
    college: '经济管理学院',
    downloadCount: 10
  },
  {
    id: 3,
    title: '新质生产力视域下湖湘“数字工匠”培育路径研究',
    authors: '田湘珍，周子健',
    journal: '湖南教育社',
    publishDate: '2024-04-20',
    keywords: '新质生产力，湖湘工匠，创新',
    abstract: '新质生产力如一股澎湃的力量，推动着时代的发展和变革。在第四次工业革命来临的今天，数字经济快速发展，新质生产力成为推动经济增长和社会进步的关键力量。湖湘地区作为我国重要的经济区域之一，培养高素质的数字工匠对于提升区域竞争力具有重要意义。',
    college: '信息工程学院',
    downloadCount: 10
  }, {
    "id": 4,
    "title": "面向未来的智能制造技术发展策略",
    "authors": "李明，张强",
    "journal": "机械工程学报",
    "publishDate": "2024-05-15",
    "keywords": "智能制造，技术发展，产业升级",
    "abstract": "智能制造技术是推动现代制造业转型的关键，本文探讨了智能制造技术的最新发展趋势，并提出了面向未来的技术发展策略。",
    "college": "机械工程学院",
    "downloadCount": 15
  },
  {
    "id": 5,
    "title": "绿色能源在城市可持续发展中的作用",
    "authors": "王华，刘洋",
    "journal": "环境科学",
    "publishDate": "2024-06-01",
    "keywords": "绿色能源，可持续发展，城市环境",
    "abstract": "随着全球能源危机的加剧，绿色能源成为城市可持续发展的重要支撑。本文分析了绿色能源在城市发展中的应用，并探讨了其对环境的积极影响。",
    "college": "环境科学与工程学院",
    "downloadCount": 20
  },
  {
    "id": 6,
    "title": "基于大数据的金融风险管理研究",
    "authors": "赵丽，孙涛",
    "journal": "金融研究",
    "publishDate": "2024-07-10",
    "keywords": "大数据，金融风险，风险管理",
    "abstract": "大数据技术在金融领域的应用日益广泛，本文研究了大数据技术在金融风险管理中的应用，并提出了有效的风险控制策略。",
    "college": "经济管理学院",
    "downloadCount": 25
  },
  {
    "id": 7,
    "title": "人工智能在医疗健康领域的应用前景",
    "authors": "陈晨，吴伟",
    "journal": "健康科学",
    "publishDate": "2024-08-05",
    "keywords": "人工智能，医疗健康，技术应用",
    "abstract": "人工智能技术的发展为医疗健康领域带来了革命性的变化。本文探讨了人工智能在医疗健康领域的应用前景，并分析了其对提高医疗服务质量的潜力。",
    "college": "医学院",
    "downloadCount": 30
  },
  {
    "id": 8,
    "title": "现代物流系统的优化与创新",
    "authors": "林峰，郭靖",
    "journal": "物流技术与管理",
    "publishDate": "2024-09-01",
    "keywords": "现代物流，系统优化，供应链管理",
    "abstract": "现代物流系统是提高供应链效率的关键。本文分析了现代物流系统的现状，并提出了系统的优化与创新策略。",
    "college": "物流与供应链管理学院",
    "downloadCount": 35
  }, {
    id: 9,
    title: '基于机器学习的自然语言处理研究',
    authors: '田湘珍，胡旋',
    journal: '中国科技报刊',
    publishDate: '2024-04-20',
    keywords: '机器学习，ai科技，创新',
    abstract: '新质生产力如一股澎湃的力量，推动着时代的发展和变革。在第四次工业革命来临的今天，数字经济快速发展，新质生产力成为推动经济增长和社会进步的关键力量。湖湘地区作为我国重要的经济区域之一，培养高素质的数字工匠对于提升区域竞争力具有重要意义。',
    college: '信息制造学院',
    downloadCount: 10
  },
])

// 响应式变量
const searchQuery = ref('') // 搜索查询
const dialogVisible = ref(false) // 控制对话框显示
const isEditing = ref(false) // 是否处于编辑模式
const currentPaper = ref({}) // 当前正在编辑的论文
const selectedPapers = ref([]) // 选中的论文
const paperForm = ref(null) // 表单引用


// 表单验证规则
const rules = reactive({
  title: [
    { required: true, message: '请输入论文标题', trigger: 'blur' },
    { min: 2, max: 100, message: '标题长度应在 2 到 100 个字符之间', trigger: 'blur' }
  ],
  authors: [
    { required: true, message: '请输入作者姓名', trigger: 'blur' }
  ],
  journal: [
    { required: true, message: '请输入期刊名称', trigger: 'blur' }
  ],
  publishDate: [
    { required: true, message: '请选择发表日期', trigger: 'change' }
  ],
  keywords: [
    { required: true, message: '请输入关键词', trigger: 'blur' }
  ],
  abstract: [
    { required: true, message: '请输入论文摘要', trigger: 'blur' },
    { min: 10, max: 500, message: '摘要长度应在 10 到 500 个字符之间', trigger: 'blur' },
  ],
  college: [
    { required: true, message: '请选择所属学院', trigger: 'change' }

  ]
})

// 计算属性：过滤后的论文列表
const filteredPapers = computed(() => {
  if (!searchQuery.value) return papers.value
  return papers.value.filter(paper =>
    paper.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    paper.authors.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    paper.keywords.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

const topDownloadedPapers = computed(() => {
  return papers.value.slice().sort((a, b) => b.downloadCount - a.downloadCount).slice(0, 5);
});

// 搜索处理
const handleSearch = () => {
  // 搜索逻辑已经在 computed 属性中实现
}

// 新增论文
const handleAdd = () => {
  isEditing.value = false
  currentPaper.value = {
    id: Date.now(), // 使用时间戳作为临时 ID
    title: '',
    authors: '',
    journal: '',
    publishDate: '',
    keywords: '',
    abstract: '',
    college: '',
    downloadCount: 0 // 初始化下载次数
  }
  dialogVisible.value = true
}

// 编辑论文
const handleEdit = (paper) => {
  isEditing.value = true
  currentPaper.value = { ...paper }
  dialogVisible.value = true
}

// 删除论文
const handleDelete = (paper) => {
  ElMessageBox.confirm(
    '确定要删除这篇论文吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    papers.value = papers.value.filter(p => p.id !== paper.id)
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    })
  })
}

// 保存论文（新增或编辑）
const handleSave = () => {
  paperForm.value.validate((valid) => {
    if (valid) {
      if (isEditing.value) {
        const index = papers.value.findIndex(p => p.id === currentPaper.value.id)
        if (index !== -1) {
          papers.value[index] = { ...currentPaper.value }
        }
      } else {
        papers.value.push({ ...currentPaper.value })
      }
      dialogVisible.value = false
      ElMessage({
        type: 'success',
        message: isEditing.value ? '编辑成功' : '新增成功',
      })
    } else {
      ElMessage({
        type: 'error',
        message: '请填写所有必填字段',
      })
      return false
    }
  })
}

// 多选处理
const handleSelectionChange = (selection) => {
  selectedPapers.value = selection
}

// 批量删除
const handleBatchDelete = () => {
  if (selectedPapers.value.length === 0) return

  ElMessageBox.confirm(
    `确定要删除选中的 ${selectedPapers.value.length} 篇论文吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    const selectedIds = selectedPapers.value.map(paper => paper.id)
    papers.value = papers.value.filter(paper => !selectedIds.includes(paper.id))
    ElMessage({
      type: 'success',
      message: '批量删除成功',
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    })
  })
}

// 下载论文
const handleDownload = (paper) => {
  paper.downloadCount += 1; // 增加下载次数
  ElMessage({
    type: 'success',
    message: '下载成功'
  });
  // 这里可以添加实际的下载逻辑
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f8f8f8;
  border-bottom: 1px solid #ddd;
  background-color: #a5c5cd;
}

.logo {
  height: 40px;

}

.nav ul {
  list-style: none;
  padding: 0;
}

.nav li {
  display: inline-block;
  margin-right: 1rem;
}

.nav a {
  text-decoration: none;
  color: #333;
}

.paper-management {
  padding: 20px;
  height: 100%;
  padding-bottom: 40px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.rankings {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ranking-list {
  width: 48%;
  background-color: white;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.ranking-list h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.ranking-list ul {
  list-style-type: none;
  padding: 0;
}

.ranking-list li {
  margin-bottom: 5px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
  margin-right: 20px;
}

.button-group {
  display: flex;
  gap: 10px;
}

.el-table {
  margin-top: 20px;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-dialog__body {
  padding-top: 10px;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}

a {
  text-decoration: none;
  color: rgba(48, 5, 133, 0.718);
}

a:hover {
  color: #409EFF;
}
</style>